<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        车位使用管理
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="js/layui-v2.7.6/layui/css/layui.css"/>
    <script src="js/jquery.js"></script>
    <script src="js/x-layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/axios.js"></script>


</head>
<body style="background-color: #f3f3f3;">
<div class="x-nav" style="height: 38px;">
            <span class="layui-breadcrumb" style=" margin-left:18px; line-height: 40px;">
              <a><cite>首页</cite></a>
              <a><cite>车位管理</cite></a>
              <a><cite>车位使用管理</cite></a>
            </span>
</div>
<div class="x-body"
     style="background-color: #fff;padding-top: 20px; padding-bottom: 50px;margin-left: 18px;margin-right: 18px">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
    <form class="layui-form x-center" action="" style="width:800px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">日期范围</label>

                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="开始日" name="LAY_demorange_s" id="LAY_demorange_s">
                </div>

                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" name="LAY_demorange_e" id="LAY_demorange_e">
                </div>

                <div class="layui-input-inline" style="margin-left: 26px">
                    <select name="community_id" id="community_id" lay-verify="" lay-search>
                    </select>
                </div>

                <div class="layui-input-inline" style="position: absolute;left: 780px">
                    <input type="text" name="carNumber" id="carNumber" placeholder="请输入车牌号码" autocomplete="off"
                           class="layui-input">
                </div>


                <div class="layui-input-inline" style="width:80px;position: absolute;left: 1000px">
                    <button class="layui-btn" lay-submit="" onclick="search(1,10)" lay-filter="sreach"><i
                            class="layui-icon">&#xe615;</i></button>
                </div>

                <div class="layui-input-inline" style="width:80px;position: absolute;left: 1300px">
                    <button class="layui-btn" onclick="extend()">更多</button>
                </div>

                <div class="layui-input-inline" style="position: absolute;left: 780px;">
                    <select name="status" id="useType" name="useType" lay-verify="required">
                        <option value="0">请选择使用性质</option>
                        <option value="1">购买</option>
                        <option value="2">出售</option>
                    </select>
                </div>

                <div class="layui-input-inline" style="position: absolute;left: 780px">
                    <select name="contractStatus" id="contractStatus" lay-verify="required">
                        <option value="0">请选择合同状态</option>
                        <option value="1">执行中</option>
                        <option value="2">未开始</option>
                        <option value="4">快到期</option>
                        <option value="5">已结束</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn" onclick="usage_add('添加','parkingusageadd.html','800','600')">
            <i class="layui-icon">&#xe608;</i>添加
        </button>
        <!-- <span class="x-right" style="line-height:40px">共有数据：<span class="layui-badge">2</span> 条</span></xblock> -->
        <table class="layui-table" lay-filter="table" id="app">
        </table>
        <div id="page"></div>
    </xblock>
</div>

<script>

    var pageSize = 10;
    var pageNum = 1;

    //列表初始化
    search(pageNum, pageSize);

    //所属小区下拉框回显
    function getCommunity_id(community_id) {
        $.ajax({
            type: "GET",//请求类型
            url: "../community/find",//请求的urlqh
            dataType: "json",//ajax接口（请求url）返回的数据类型
            success: function (data) {//data：返回数据（json对象）
                var options = "<option value='0'>请选择所属小区</option>";
                $("#community_id").html("");
                layui.form.render("select");
                for (var i = 0; i < data.data.length; i++) {
                    if (community_id == data.data[i].id && community_id != null) {
                        options += "<option selected value=\"" + data.data[i].id + "\" class>" + data.data[i].name + "</option>";
                    } else {
                        options += "<option value=\"" + data.data[i].id + "\" class>" + data.data[i].name + "</option>";
                    }
                }
                $("#community_id").append(options);
                layui.form.render("select");
            },
            error: function (data) {//当访问时候，404，500 等非200的错误状态码
                alert("所属加载小区失败！");
            }
        });
    }


    // function compareRadio(new_switch) {
    //     if (new_switch == 2) {
    //         // document.getElementById("switch").checked=true;
    //         $("#switch").val(new_switch)
    //         $("#switch").attr("checked", true);
    //     } else if (new_switch == 0) {
    //         $("#switch").attr("checked", false);
    //         $("#switch").val(new_switch)
    //         // document.getElementById("switch").checked=false;
    //     }
    //     layui.form.render("checkbox");
    // }

    //比较时间
    function compareDate(date1, date2) {
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if (date1 != '' && date2 != '') {
            if (oDate1.getTime() > oDate2.getTime()) {
                return true; //第一个大
            } else {
                return false; //第二个大
            }
        } else {
            return false;
        }
    }

    //扩展
    function extend() {

    }

    //查询方法
    function search(num, size) {
        var new_LAY_demorange_s = $("#LAY_demorange_s").val();
        var new_LAY_demorange_e = $("#LAY_demorange_e").val();
        var new_name = $("#name").val();
        var new_community_id = $("#community_id").val();
        // var new_status = $("#status").val();
        // var new_switch = $("#switch").val();
        // if (new_switch!=0&&new_switch!=2){
        //     new_switch='0';
        // }
        var searchMap = {
            "LAY_demorange_s": new_LAY_demorange_s,
            "LAY_demorange_e": new_LAY_demorange_e,
            "name": new_name,
            "community_id": new_community_id,
            // "status": new_status,
            // "switch": new_switch,
            "pageNum": (num - 1) * size,
            "pageSize": size
        };
        if (compareDate(new_LAY_demorange_s, new_LAY_demorange_e)) {
            $("#LAY_demorange_s").val("");
            $("#LAY_demorange_e").val("");
            layer.msg("开始日不可以大于截止日！");
            search(num, size);
        }
        axios.post("/parkingUse/search", searchMap).then((res) => {
            layui.use(['laydate', 'element', 'laypage', 'form', 'layer', 'table'], function () {
                var laydate = layui.laydate;//日期插件
                var lement = layui.element;//面包导航
                var laypage = layui.laypage;//分页
                var layer = layui.layer;//弹出层
                var table = layui.table;
                var form = layui.form;
                $ = layui.jquery;//jquery
                //执行一个 table 实例
                table.render({
                    elem: '#app'
                    , height: 420
                    , data: res.data.data
                    , title: '车辆使用表'
                    , toolbar: '#toolbarDelAdd' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , totalRow: true //开启合计行
                    , cols: [[ //表头
                        {type: 'checkbox'}
                        , {field: 'id', title: '账单编号', sort: true, align: "center", width: 100}
                        , {field: 'name', title: '所属小区', align: "center", width: 100}
                        , {field: 'code', title: '车位编号', sort: true, align: "center", width: 100}
                        , {field: 'picture', title: '车辆牌照', sort: true, align: "center", width: 120}
                        , {field: 'userName', title: '车辆所有人', sort: true, align: "center", width: 120}
                        , {field: 'telephone', title: '联系方式', sort: true, align: "center", width: 120}
                        , {field: 'useType', title: '使用性质 ', sort: true, align: "center", width: 120}
                        , {field: 'paymentStatus', title: '支付状态', sort: true, align: "center", width: 120}
                        , {
                            field: 'totalFee',
                            title: '总费用(￥)',
                            sort: true,
                            align: "center",
                            width: 120,
                            templet: function (res) {
                                return res.totalFee + ".00"
                            }
                        }
                        , {
                            field: 'contractStatus',
                            title: '合同状态',
                            sort: true,
                            align: "center", width: 120,
                            templet: function (res) {
                                if (res.contractStatus == "执行中") {
                                    return '<span class="layui-btn layui-bg-blue" >' + res.contractStatus + '</span>'
                                } else if (res.contractStatus == "未开始") {
                                    return '<span class="layui-btn layui-bg-green" >' + res.contractStatus + '</span>'
                                } else if (res.contractStatus == "快到期") {
                                    return '<span class="layui-btn layui-bg-red" >' + res.contractStatus + '</span>'
                                } else if (res.contractStatus == "已结束") {
                                    return '<span class="layui-btn layui-bg-orange" >' + res.contractStatus + '</span>'
                                }
                            }
                        }, {
                            field: 'createTime',
                            title: '创建时间',
                            sort: true,
                            align: "center",
                            width: 140,
                            templet: function (res) {
                                return layui.util.toDateString(res.createTime, 'yyyy-MM-dd')
                            }
                        }
                        , {
                            field: 'startTime',
                            title: '开始时间',
                            sort: true,
                            align: "center",
                            width: 140,
                            templet: function (res) {
                                return layui.util.toDateString(res.startTime, 'yyyy-MM-dd')
                            }
                        }
                        , {
                            field: 'endTime',
                            title: '截止时间',
                            sort: true,
                            align: "center",
                            width: 140,
                            templet: function (res) {
                                return layui.util.toDateString(res.endTime, 'yyyy-MM-dd')
                            }
                        }

                        , {
                            field: 'sign', title: '操作', align: "center", width: 120, templet: function (resp) {
                                return ' <a title="查看" href="javascript:;" onclick="parkusage_edit(\'查看\',\'parkingusageadd.html\',' + resp.id + ',\'\',\'510\')"' +
                                    '       class="ml-5" style="text-decoration:none">' +
                                    '        <i class="layui-icon">&#xe615;</i>' +
                                    '    </a>' +
                                    '    <a title="删除" href="javascript:;" onclick="parkusage_del(this,' + resp.id + ')"' +
                                    '       style="text-decoration:none">' +
                                    '        <i class="layui-icon">&#xe640;</i>' +
                                    '    </a>'
                            }
                        }
                    ]]
                });

                //分页初始化
                laypage.render({
                    elem: 'page' //分页容器的id
                    , count: res.data.total //数据总数
                    , limit: pageSize //每页显示的数据条数
                    , curr: pageNum
                    , skin: '#1E9FFF' //自定义选中色值
                    , layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
                    , jump: function (obj, first) {
                        if (!first) {
                            layer.msg('第' + obj.curr + '页', {offset: 'b'});
                            pageNum = obj.curr;
                            pageSize = obj.limit;
                            search(pageNum, pageSize);
                        }
                    }
                });

                //日期初始化
                laydate.render({
                    elem: "#LAY_demorange_s",
                    type: "date"
                    , istoday: false
                });

                laydate.render({
                    elem: "#LAY_demorange_e",
                    type: "date"
                    , istoday: false
                });
                getCommunity_id(new_community_id);
                // compareRadio(new_switch);
                table.on("toolbar(table)", function (obj) {
                        if (obj.event == "delAll") {
                            layer.confirm('确认要删除吗？', function () {
                                var checkStatus = table.checkStatus(obj.config.id);
                                var ids = [];
                                for (var i = 0; i < checkStatus.data.length; i++) {
                                    if (checkStatus.data[i].status == "使用中") {
                                        layer.msg("有的车位在使用中,不可删除！");
                                        return false;
                                    } else {
                                        console.log(checkStatus.data[i].id);
                                        ids.push(checkStatus.data[i].id);
                                    }
                                }
                                axios.post("parking/del", ids).then((rels) => {
                                    if (rels.code = 2000) {
                                        layer.msg('删除成功');
                                        var total = res.data.total;  //总数
                                        var sun = total - obj.config.data.length;
                                        // var s_total=total%pageSize==0?total/pageSize:total/pageSize+1;
                                        var e_total = sun % pageSize == 0 ? sun / pageSize : sun / pageSize + 1;
                                        search(pageNum <= e_total ? pageNum : pageNum - 1, pageSize);
                                    } else {
                                        layer.msg("删除失败")
                                    }
                                })
                            })
                        } else if (obj.event == "update") {
                            var t_switch = $("#switch").val();
                            $("#switch").val(t_switch == 2 ? 0 : 2);
                            search(1, size);
                        }
                    }
                )

            });

        });
    }

    //批量删除提交
    function delAll() {
        layer.confirm('确认要删除吗？', function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }

    function question_show(argument) {
        layer.msg('可以跳到前台具体问题页面', {icon: 1, time: 1000});
    }

    /*添加*/
    function usage_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }

    //编辑
    function parkusage_edit(title, url, id, w, h) {
        url = url + "?id=" + id;
        x_admin_show(title, url, w, h);
    }

    //编辑
    function parkusage_show(title, url, id, w, h) {
        url = url + "?id=" + id;
        x_admin_show(title, url, w, h);
    }

    /*删除*/
    function parkusage_del(obj, id) {
        layer.confirm('确认要删除吗？', {icon: 3, title: '提示信息'}, function (index) {
            $.ajax({
                type: "post",
                url: "xxxx",
                data: {id: id},
                dataType: "json",
                success: function (data) {
                    //console.log(data);
                    if (data.status == 1) {
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg(data.info, {icon: 6, time: 1000});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                        return false;
                    } else {
                        layer.msg(data.info, {icon: 5, time: 1000});
                        return false;
                    }
                }
            });
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }
</script>

</body>
</html>